<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 载入文章头部页面，位置在/client文件夹下的header模板页面，模板名称th:fragment为header -->
<div th:replace="/client/header::header(null,null)"/>
<style>
    .Limit-the-number-of-words {
        max-width: 400px;
        max-height: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: break-spaces;
    }
</style>
<body>
<div class="am-g am-g-fixed blog-fixed index-page">
    <div class="am-u-md-8 am-u-sm-12">
        <!-- 文章遍历并分页展示 -->
        <div th:each="article:${articleList}">
            <article class="am-g blog-entry-article">
                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                    <img th:src="${article.thumbnail}" width="100%" class="am-u-sm-12"/>
                </div>
                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
                    <!-- 文章分类 -->
                    <span class="blog-color" style="font-size: 15px;"><a>默认分类</a></span>
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <!-- 发布时间 -->
                    <span style="font-size: 15px;" th:text="'发布于 '+ ${article.created}"/>
                    <h2>
                        <div>
                            <a style="color: #0f9ae0;font-size: 20px;" th:href="@{'/articleId/'+${article.id}+'/commentPage/1'+'/isHits/1'}"
                               th:text="${article.title}"/><a style="color: #0f9ae0;font-size: 20px;"/>
                        </div>
                    </h2>
                    <!-- 文章摘要-->
                    <!--                    <div style="font-size: 16px;" th:utext="${commons.intro(article,75)}" />-->
                    <div class="Limit-the-number-of-words" style="font-size: 16px;" th:utext="${article.content}"/>
                </div>
            </article>
        </div>
        <!-- 文章分页信息 -->
        <div class="am-pagination">
            <a th:if="${!pageInfo.isFirstPage}"
               th:href="@{'/'+${pageInfo.navigateFirstPage}}">
                <button>首页</button>
            </a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a th:if="${pageInfo.hasPreviousPage}"
               th:href="@{'/'+${pageInfo.prePage}}">
                <button>上一页</button>
            </a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a th:if="${pageInfo.hasNextPage}"
               th:href="@{'/'+${pageInfo.nextPage}}">
                <button>下一页</button>
            </a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a th:if="${!pageInfo.isLastPage}"
               th:href="@{'/'+${pageInfo.navigateLastPage}}">
                <button>尾页</button>
            </a>
            <!--            <div th:replace="/comm/paging::pageNav(${articles},'上一页','下一页','page')"/>-->
        </div>
    </div>
    <!-- 博主信息描述 -->
    <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>CrazyStone</span></h2>
            <img th:src="@{/assets/img/me.jpg}" alt="about me" class="blog-entry-img"/>
            <p>
                Java后台开发
            </p>
            <p>个人博客小站，主要发表关于Java、Spring、Docker等相关文章</p>
        </div>
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>联系我</span></h2>
            <p>
                <a><span class="am-icon-github am-icon-fw blog-icon"></span></a>
                <a><span class="am-icon-weibo am-icon-fw blog-icon"></span></a>
            </p>
        </div>
    </div>
    <!-- 阅读排行榜 -->
    <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>阅读排行榜</span></h2>
            <div style="text-align: left">
                <th:block th:each="article :${articles}">
                    <a style="font-size: 15px;"
                       th:href="@{'/articleId/'+${article.id}+'/commentPage/1/isHits/1'}"
                       th:text="${article.idNumber}+'、'+${article.title}+'('+${article.hits}+')'"></a>
                    <hr style="margin-top: 0.6rem;margin-bottom: 0.4rem"/>
                </th:block>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 载入文章尾部页面，位置在/client文件夹下的footer模板页面，模板名称th:fragment为footer -->
<div th:replace="/client/footer::footer"/>
</html>
